<script setup>
import { inject, onMounted, ref } from 'vue'
import Vrouter from "@/router"
const change_icon = inject('change_icon')
import { get_user_info } from '@/api/user/user.js'
import { MYURL as URL } from '@/utils/express/express.js'
import get_LV from '@/api/experience/experience.js'
import isToken from '@/utils/token/token.js'
import { userStore } from "@/stores/user.js"
const changeFriend = userStore()
onMounted(() => {
  change_icon(3, 'my')
})
const router = Vrouter;
const login = () => {
  if (is_show_coin.value) {
    router.push('/user')
  } else {
    router.push('/login')
  }
}
const person_imformation = ref({
  active: '-',
  username: '点击登录',
  idol: '-',
  fans: '-',
  vip: '正式会员',
  coin: '',
  profile: `${URL}/public/icon/login-out.png`

})
let lv_img = ref(`${URL}/public/icon/lv1.png`)
const person_name = ref(19)
const is_show_coin = ref(false)
onMounted(() => {
  get_user_info().then((res) => {
    if (res.data.status === 1) {
      person_name.value = 19
      is_show_coin.value = false
      person_imformation.value.active = '-'
      person_imformation.value.fans = '-'
      person_imformation.value.username = '点击登录'
      person_imformation.value.idol = '-'
      person_imformation.value.profile = `${URL}/public/icon/login-out.png`
      return
    }
    person_imformation.value.vip = res.data.mes[0].vip
    person_imformation.value.username = res.data.mes[0].username
    person_imformation.value.coin = res.data.mes[0].coin
    res.data.mes[0].active === null ? person_imformation.value.active = 0 : person_imformation.value.active = res.data.mes[0].active
    res.data.mes[0].fans === null ? person_imformation.value.fans = 0 : person_imformation.value.fans = res.data.mes[0].fans.split(',').length
    res.data.mes[0].idol === null ? person_imformation.value.idol = 0 : person_imformation.value.idol = res.data.mes[0].idol.split(',').length
    person_imformation.value.profile = `${URL}/public/profiles/${res.data.mes[0].profile}`
    person_imformation.value.experience = res.data.mes[0].experience
    lv_img.value = `${URL}/public/icon/lv${get_LV(person_imformation.value.experience).LV}.png`
    is_show_coin.value = true
    person_name.value = 15
  })
})
const go_edit = () => {
  router.push('/changeimformation')
}
const goFan = (e) => {
  changeFriend.changeFriendState(e)
  if (!isToken()) return router.push('/login')
  router.push('/friend')
}
</script>

<template>
  <div @click="login" class="no-login">
    <div class="my-top-login-out">
      <div>
        <img class="my-profile" :src="person_imformation.profile">
        <div class="person_have">
          <div class="profile_about">
            <p class="person_name" :style="{ fontSize: person_name + 'px' }">{{ person_imformation.username }}</p>
            <img v-if="is_show_coin" src="@/assets/img/eitor.png" @click.stop="go_edit">
            <img v-if="is_show_coin" :src="lv_img">
          </div>
          <p v-if="is_show_coin" class="isVip">{{ person_imformation.vip }}</p>
          <p v-if="is_show_coin" class="coin">硬币:{{ person_imformation.coin }}</p>
        </div>
      </div>
      <img class="my-top-login-out-right" src="@/assets/img/getback.png" alt="">
    </div>
    <div class="my-action">
      <div>
        <p>{{ person_imformation.active }}</p>
        <p>动态</p>
      </div>
      <p>|</p>
      <div @click.stop="goFan(true)">
        <p>{{ person_imformation.idol }}</p>
        <p>关注</p>
      </div>
      <p>|</p>
      <div @click.stop="goFan(false)">
        <p>{{ person_imformation.fans }}</p>
        <p>粉丝</p>
      </div>
    </div>
  </div>
  <div class="my-ad-main">
    <div class="my-ad">
      <img src="@/assets/img/bigad.png">
      <div>
        <p>成为大会员</p>
        <p>了解更多权益</p>
      </div>
      <div>
        <p>立即开通</p>
        <img src="@/assets/img/getbackright.png">
      </div>
    </div>
  </div>
  <div class="four-add-nav">
    <router-link class="add-nav" to="/empty">
      <img src="@/assets/img/huancun.png" alt="">
      <p>离线缓存</p>
    </router-link>
    <router-link class="add-nav" to="/history">
      <img src="@/assets/img/lishi.png" alt="">
      <p>历史记录</p>
    </router-link>
    <router-link class="add-nav" to="/user_star">
      <img src="@/assets/img/souchang.png" alt="">
      <p>我的收藏</p>
    </router-link>
    <router-link class="add-nav" to="/empty">
      <img src="@/assets/img/later.png" alt="">
      <p>稍后再看</p>
    </router-link>
  </div>
  <div class="more-server">
    <p>更多服务</p>
    <div @click="router.push('/feedback')">
      <img class="setting-icon" src="@/assets/img/server.png" alt="">
      <p>联系客服</p>
      <img class="setting-trangle" src="@/assets/img/getback.png" alt="">
    </div>
    <div @click="router.push('/setting')">
      <img class="setting-icon" src="@/assets/img/setting.png" alt="">
      <p>设置</p>
      <img class="setting-trangle" src="@/assets/img/getback.png" alt="">
    </div>
  </div>
</template>

<style scoped lang="less">
.my-top-login-out {
  padding: 20px 20px 0 20px;
  display: flex;
  align-items: center;

  .my-profile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }

  >div {
    display: flex;
    align-items: center;
    gap: 20px;

    >div {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }

    .person_name {
      font-weight: 600;
    }

    .isVip {
      padding: 0 5px;
      border-radius: 3px;
      display: inline;
      text-align: center;
      // font-weight: 600;
      font-size: 9px;
      border: 0.7px solid var(--bilibili-pink);
      color: var(--bilibili-pink);
    }

    .coin {
      // font-weight: 600;
      font-size: 11px;
      color: #979ba1;
    }

    img {
      width: 15vw;
    }
  }

  .my-top-login-out-right {
    margin-left: auto;
    width: 8px;
    transform: rotate(180deg);
  }
}

.profile_about {
  display: flex;
  gap: 6px;
  align-items: center;

  img {
    width: 18px !important;

  }
}

.my-action {
  width: 80%;
  margin: 30px auto;
  margin-bottom: 0;
  display: flex;
  justify-content: space-around;

  >p {
    font-size: 20px;
    color: #e4e4e4;
  }

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;

    p:nth-child(1) {
      font-weight: 600;
    }

    p:nth-child(2) {
      color: #9e9da2;
    }
  }
}

.my-ad-main {
  margin-top: 20px;
  padding: 0px 10px;
}

.my-ad {
  padding: 5px 10px;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  background-color: #fcedf2;

  >img {
    width: 30px;
  }

  >div:nth-child(2) {
    display: flex;
    flex-direction: column;
    color: var(--bilibili-pink);

    p:nth-child(1) {
      font-weight: 600;
    }

    p:nth-child(2) {
      font-size: 13px;
    }
  }

  >div:nth-child(3) {
    margin-left: auto;
    display: flex;
    gap: 6px;
    font-size: 12px;
    align-items: center;
    color: var(--bilibili-pink);

    img {
      width: 8px;
    }
  }
}

.four-add-nav {
  margin-top: 20px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}

.add-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  gap: 5px;

  img {
    width: 25px;
  }
}

.more-server {
  margin-top: 20px;
  padding: 0 10px;

  >p {
    font-weight: 600;
    font-size: 14px;
  }

  >div {
    margin-top: 20px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;

    .setting-icon {
      width: 25px;
    }

    .setting-trangle {
      width: 6px;
      transform: rotate(180deg);
      margin-left: auto;
    }
  }
}
</style>
